<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href='../assets/css/File_Zipper.css'>
    <script src='../assets/css/File_Zipper.css'></script>
    <script src="../assets/js/File_Zipper_js/script.js" type="module"></script>

</head>

<body>
    <nav class="navbar navbar-light " style="font-size: 25px; font-family: sans-serif; background-color: whitesmoke;">


        File Zipper(only .txt files can be encoded and decoded as of now)
    </nav>
    <div id="container">
        <div class="text_box" style="overflow-y: scroll">
            <span id="treearea" style="width: 100%; text-align: center; font-size: medium;">
                Tree Structure Will Be Displayed Here !!
            </span>
        </div>
        <div class="text_box" style="overflow-y: scroll">
            <span id="temptext" style="width: 100%; text-align: center; font-size: x-large;">
                Operation info will be shown here !!
            </span>
        </div>
    </div>

    <div>
        <form method="post" enctype="multipart/form-data" style="display: inline-block;">
            <input type="file" id="uploadedFile" />
        </form>
        <br>
        <button type="button" class="btn btn-success center_buttons" id="encode">&nbsp;&nbsp;Encode&nbsp;&nbsp;</button>
        <br>
        <button type="button" class="btn btn-danger center_buttons" id="decode">&nbsp;&nbsp;Decode&nbsp;&nbsp;</button>
    </div>
</body>

</html>
